<template>
	<view class="">
		<view class="product">
			<view class="list" v-for="(item, index) in productList" @tap="todetail(index)" :key="index">
				<view class="pic"><image :src="item.img" mode="aspectFill"></image></view>
				<view class="info">
					<view :class="titleLineheight ? 'info_tilte' : 'info_title-over'">{{item.name}}</view>
					<!-- <view class="desc" v-if="descShow">{{item.size_info}}</view> -->
					<view class="volume volume-font" v-if="numShow && item.limit_num"><image :src="Url+'add_images/ic-hot.png'" mode="widthFix"></image>销量:{{item.limit_num}}</view>
					<view :class="[item.size_info ? 'standard' : '','clearfix',numShow ? '' : 'numcss']">{{item.size_info}}</view>
					<view class="price clearfix">
						<view class="" v-if="type != 2">
							<text class="price_now">{{item.price}}</text>
							<text class="price_line" v-if="item.cost_price > 0">￥{{item.cost_price}}</text>
						</view>
						<view class="" v-else>
							<text class="price_now1">{{item.price}}</text>
							<text class="price_line" v-if="item.cost_price > 0">￥{{item.cost_price}}</text>
						</view>
						<view class="num" v-if="item.num && type != 2">
							x{{item.num}}
						</view>
						<view class="num" v-else>
							x1
						</view>
					</view>
					<view v-if="!item.num && type != 2" class="addcart" @tap.stop="addcart($event)"><image :src="Url+'mine/index/add.png'" mode=""></image></view>
					<!-- <slot @tap="change(index,key)" name="add_delet"></slot> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props:{
		productList:{
			type:Array
		},
		descShow:{
			type:Boolean,
			default:true
		},
		titleLineheight:{
			type:Boolean,
			default:true
		},
		numShow:{
			type:Boolean,
			default:true
		},
		type:{
			type:Number,
			default:1
		}
	},
	data() {
		return {
			Url:this.Imgurl
		};
	},
	methods: {
		// todetail (index) {
		// 	uni.navigateTo({
		// 		url: '/pageB/classify/productdetail?productid=' + index
		// 	})
		// },
		addcart (e) {
			console.log(e);
		}
	}
};
</script>

<style lang="less" scoped>
.numcss{
	margin: 20upx 0;
	min-height: 40upx;
}
.product {
	background-color: #ffffff;
	padding: 0 26upx;
	box-sizing: border-box;
}
.info_title-over{
	height:70upx;
	font-size: 28upx;
	color: #333333;
	line-height:35upx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	-webkit-transition: all linear 0.2s;
	transition: all linear 0.2s;
}
.list {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
			padding: 30upx 0;
	.pic {
		width: 35%;
		height:200upx;
		margin-right:30upx;
		
		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}
	.info {
		width: 65%;
		position: relative;
		box-sizing: border-box;
		border-bottom: 2upx solid #F9F9F9;
		padding-bottom: 20upx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		.info_tilte {
			height: 80upx;
			font-size: 28upx;
			color: #333333;
			line-height: 40upx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			// height: 80upx;
		}
		.desc {
			font-size: 22upx;
			color: #999999;
			line-height: 32upx;
		}
		.volume {
			font-size: 20upx;
			color: #999;
			margin: 10upx 0;
		}
		.volume-font{
			padding: 8upx 17upx;
			box-sizing: border-box;
			background:rgba(255,40,66,0.04);
			border-radius:4upx;
			color: #FF2842;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width:25upx;
				height: 25upx;
				margin-right:10upx;
			}
		}
		.standard {
			display: inline-block;
			min-height: 40upx;
			background-color: #f9f9f9;
			color: #999999;
			padding: 0 10upx;
			box-sizing: border-box;
			border-radius: 8upx;
			line-height: 40upx;
			font-size: 24upx;
			margin-bottom:10upx;
		}
		.price {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 40upx;
			width: 100%;
			margin-top: 22upx;
			.price_now {
				font-size: 28upx;
				color: #f73e2f;
				line-height: 40upx;
				line-height: 28upx;
				margin-right: 10upx;
				font-weight: bold;
				&::before{
					content:'￥';
					display: inline-block;
					font-size: 20upx;
					font-weight: 400;
				}
			}
			.price_now1 {
				font-size: 28upx;
				color: #f73e2f;
				line-height: 40upx;
				line-height: 28upx;
				margin-right: 10upx;
				font-weight: bold;
			}
			.price_line {
				font-size:18upx;
				line-height: 24upx;
				color: #999;
				line-height: 40upx;
				text-decoration: line-through;
			}
			.num {
				font-size: 28upx;
				color: #999999;
				line-height: 28upx;
				margin-top: -8upx;
			}
		}
		.addcart {
			position: absolute;
			bottom: 14upx;
			right: 0;
			width: 52upx;
			height: 52upx;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
		.add_delet {
			position: absolute;
			bottom: 20upx;
			right: 0;
			z-index: 9;
			.delet {
				text-align: right;
				.icon {
					font-size: 28upx;
					color: #999999;
				}
			}
			.add {
				.icon {
					font-size: 28upx;
					color: #999999;
				}
				text {
					font-size: 28upx;
					margin: 0 10upx;
				}
			}
		}
	}
}
.list:last-child .info {
	border-bottom: none;
}
</style>
